<template>
  <!-- 页面统一布局组件 -->
  <PageCard class="mall-goods-manage">
    <!--页面标题 -->
    <div class="page-title">
      功能菜单
    </div>
    <!-- 商品功能 -->
    <div class="page-card">
      <el-card
      class="box-card"
      v-if="$btnPermission.verifyMenu('MallGoodsQuickQueryPage')"
      @click.native="toPage('/mall/goods/quick/query')">
        <div class="card-menu-icon">
          <svg-icon icon-class="quick-query" :size="5" color="#409EFF"></svg-icon>
        </div>
        <div class="card-menu-name">
          快捷查询
        </div>
      </el-card>
      <el-card
      class="box-card"
      v-if="$btnPermission.verifyMenu('MallGoodsCatalogPage')"
      @click.native="toPage('/mall/goods/catalog')">
        <div class="card-menu-icon">
          <svg-icon icon-class="goods-catalog" :size="5" color="#409EFF"></svg-icon>
        </div>
        <div class="card-menu-name">
          商品目录
        </div>
      </el-card>

      <el-card
      class="box-card"
      v-if="$btnPermission.verifyMenu('MallGoodsAuditPage')"
      @click.native="toPage('/mall/goods/audit')">
        <div class="card-menu-icon">
          <svg-icon icon-class="goods-audit" :size="5" color="#409EFF"></svg-icon>
        </div>
        <div class="card-menu-name">
          商品审核
        </div>
      </el-card>

      <el-card class="box-card">
        <div class="card-menu-icon">
          <svg-icon icon-class="goods-info" :size="5" color="#409EFF"></svg-icon>
        </div>
        <div class="card-menu-name">
          商品信息
        </div>
      </el-card>
    </div>
  </PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'

export default {
  name: 'GoodsManagePage',
  components: {
    PageCard
  },
  methods: {
    // 跳转页面
    toPage(path) {
      this.$router.push({
        path: path
      })
    }
  }
}
</script>
<style lang="scss" scoped>

.mall-goods-manage {

  .page-title {
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
  }

  .page-card {
    margin-top: 60px;
    margin-left: 20px;
    display: flex;
    justify-content: flex-start;

    .box-card {
      margin-left: 40px;
      width: 200px;
      height: 200px;
      overflow: hidden;

      .card-menu-icon {
        height: 50%;
        width: 100%;
        text-align: center;
        margin: 20px auto;
      }

      .card-menu-name {
        height: 50%;
        width: 100%;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
      }
    }

    .box-card:hover {
      border: 2px solid #409EFF;
      cursor: pointer;
    }
  }
}
</style>